<template>
	<view class="chooseSchool">
		<image src="../../../static/icons/search.png" mode=""></image>
		<input type="text" placeholder="搜索资格名称" />
		<view class="schoolClass">
			<view class="schoolHeader">
				<view class="subject"
				:class="navIndex===1?'classActive':''"
				@click="checkIndex(1)">
					初级
				</view>
				<view class="subject"
				:class="navIndex===2?'classActive':''"
				@click="checkIndex(2)">
					中级
				</view>
				<view class="subject" 
				:class="navIndex===3?'classActive':''" 
				@click="checkIndex(3)">
					高级
				</view>
			</view>
			<view class="content" v-if="navIndex==1">
				<scroll-view  class="left" scroll-y >
					<view v-for="(item,index) in schoolClass" 
					:class="active===index?'activeSubject':''"
					:key="item.id"  
					@click="clickClass(index,item.id)">
					{{item.title}}</view>
				</scroll-view>
				<scroll-view scroll-y class="right" show-scrollbar="false" >
					<view class="secondSubject" 
					v-for="(item,index) in secondSubject" 
					:key="item.id">
						<text>{{item.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="content" v-if="navIndex==2" >
				<scroll-view scroll-y class="left"  show-scrollbar="false">
					<view 
					:class="active1===index?'activeSubject':''"
					v-for="(item,index) in schoolClass1" 
					:key="item.id"
					@click="clickClass1(index,item.id)">
					{{item.title}}
					</view>
				</scroll-view>
				<scroll-view scroll-y class="right" show-scrollbar="false" >
					<view class="secondSubject" 
					v-for="item in secondSubject" 
					:key="item.id">
					<text>{{item.title}}</text>
					</view>
				</scroll-view>
			</view>
			<view class="content" v-if="navIndex==3" >
				<scroll-view scroll-y class="left"  show-scrollbar="false">
					<view 
					:class="active2===index?'activeSubject':''"
					v-for="(item,index) in schoolClass2" 
					:key="item.id"
					@click="clickClass2(index,item.id)">
					{{item.title}}
					</view>
				</scroll-view>
				<scroll-view scroll-y class="right" show-scrollbar="false" >
					<view class="secondSubject" 
					v-for="item in secondSubject" 
					:key="item.id">
					<text>{{item.title}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:1,
				active:0,
				active1:0,
				active2:0,
				schoolClass:[
					{
					id:"01",
					title:"程序员"
				    },
					{
					id:"02",
					title:"网络管理员"
					},
					{
					id:"03",
					title:"信息系统运行管理员"
					},
					{
					id:"04",
					title:"信息处理技术员"
					},
					
				],
				schoolClass1:[
					{
						id:"01",
						title:"软件设计师"
					},
					{
						id:"02",
						title:"网络工程师"
					},
					{
						id:"03",
						title:"信息系统监理师"
					},
					{
						id:"04",
						title:"系统集成项目管理工程师"
					},
					{
						id:"05",
						title:"嵌入式系统设计师"
					},
					{
						id:"06",
						title:"电子商务设计师"
					},
					{
						id:"07",
						title:"数据库系统工程师"
					},
					
				],
				schoolClass2:[
					{
						id:"01",
						title:"信息系统项目管理师"
					},
					{
						id:"02",
						title:"系统分析师"
					},
					{
						id:"03",
						title:"系统规划与管理师"
					},
					
					
				],
			    secondSubject:[
					
				],
			}
		},
		methods: {
			checkIndex(index){
				this.navIndex=index;
			},
			clickClass(index,id){
				this.active=index;
				console.log(id);
				// this.secondSubject=
			},
			clickClass1(index,id){
				this.active1=index;
			},
			clickClass2(index,id){
				this.active2=index;
			}
		}
	}
</script>

<style lang="scss">
.chooseSchool{
	font-family: "黑体";
	input{
		width: 600rpx;
		height:80rpx;
		margin: 40rpx auto;
		background: #eee;
		border-radius: 20rpx;
		position: relative;
		padding-left: 100rpx;
	}
	image{
		position: absolute;
		width: 39rpx;
		height: 39rpx;
		left: 50rpx;
		top: 60rpx;
		z-index: 1;
	}
	.schoolClass{
		.schoolHeader{
			display: flex;
			justify-content: space-between;
			
			padding-left: 60rpx;
			padding-right: 60rpx;
			font-size: 40rpx;
			color:#808080;
			font-weight: bold;
			box-shadow:0 20rpx 30rpx 0 #f1f1f1 ;
			.subject{
				width: 300rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				letter-spacing: 1px;
			}
			.classActive{
				color: pink;
				color:#007AFF;
			}
		}
		.content{
			// display:flex;
			
			
			.left{
				background: #eee;
				height: 100%;
				flex:2;
				color: #555555;
				letter-spacing: 2px;
				text-align: center;
				font-size: 16px;
				flex-wrap: wrap;
				letter-spacing: .8px;
				view{
					height: 120rpx;
					line-height: 120rpx;
				}
				.activeSubject{
					color: darken( #000000, 10%);
					border-bottom: 1px solid #007AFF;
				}
			}
			.clickClass{
				color:#007AFF;
			}
			.right{
				flex:4;
				height: 100%;
				padding-left: 40rpx;
				padding-right: 40rpx;
				view{
					height: 120rpx;
					line-height: 120rpx;
					background:#eee ;
					padding-left: 40rpx;
					padding-right: 40rpx;
					margin-top: 40rpx;
					border-radius: 20rpx;
					text{
						width: 100%;
						display: block;
					}
					
				}
			}
		}
	}
}
</style>
